import 'package:flutter/material.dart';
import 'package:flutter_mall_app/pages/product/child_product_list.dart';
import 'package:flutter_mall_app/pages/product/right_product_page.dart';
import '../../api/api_methods.dart';
import 'dart:convert';
import '../../model/CategoryModel.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ProductList extends StatefulWidget {
  @override
  _ProductListState createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> with AutomaticKeepAliveClientMixin {
  CategoryModel modelList;
  int listIndex = 0;

  void _getData() async {
    await request("getCategory").then((value) {
      var data = json.decode(value.toString());
      modelList = CategoryModel.fromJson(data);
      setState(() {});
    });
  }

  @override
  void initState() {
    _getData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return modelList != null
        ? Scaffold(
            appBar: AppBar(
              title: Text("商品分类"),
            ),
            body: Row(
              children: <Widget>[
                Container(
                  width: ScreenUtil().setWidth(180),
                  child: ListView.builder(
                    itemBuilder: (context, index) {
                      return _buildLeftItem(index, modelList.data[index]);
                    },
                    itemCount: modelList.data.length,
                  ),
                ),
                RightProductPage(list: modelList.data[listIndex].bxMallSubDto),
//                _buildRightItem(
//                  modelList.data[listIndex].bxMallSubDto,
//                ),
              ],
            ),
          )
        : Center(
            child: Text("没有数据"),
          );
  }

//分类右侧列表子项
  Widget _buildLeftItem(index, CategoryModelData data) {
    bool isClick = false;
    isClick = (listIndex == index) ? true : false;
    return InkWell(
      child: Container(
        height: ScreenUtil().setHeight(100),
        alignment: Alignment.center,
        child: Text(
          "${data.mallCategoryName}",
          style: TextStyle(color: isClick ? Colors.redAccent : Colors.grey),
        ),
        decoration: BoxDecoration(color: isClick ? Colors.white : Colors.grey[200]),
      ),
      onTap: () {
        setState(() {
          listIndex = index;
        });
      },
    );
  }

//  //右侧子商品列表
//  Widget _buildRightItem(List<BxMallSubDto> item) {
//    return Expanded(
//      child: GridView.count(
//        padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
//        crossAxisCount: 2,
//        crossAxisSpacing: 8.0,
//        mainAxisSpacing: 8.0,
//        childAspectRatio: 3/4,
//        children: item.map((data) {
//          return Container(
//            color: Colors.white,
//            child: InkWell(
//              child: Column(
//                children: <Widget>[
//                    CachedNetworkImage(
//                      imageUrl:
//                      "http://images.baixingliangfan.cn/compressedPic/20190117140520_9423.jpg",
//                      fit: BoxFit.cover,
//                    ),
//                  SizedBox(height: 16,),
//                  Text("${data.mallSubName}")
//                ],
//              ),
//              onTap: () {
//                debugPrint("点击了${data.mallCategoryId}=====${data.mallSubId}=====${data.mallSubName}");
//                Navigator.of(context).push(MaterialPageRoute(builder: (context){
//                  return ChildProductList(bxMallSubDto: data,);
//                }));
//              },
//            ),
//          );
//        }).toList(),
//      ),
//    );
//  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
